<script setup lang="ts">
import { ref } from "vue";
// import {NScrollbar} from "naive-ui";
const props = defineProps<{
  titles: string[]
  count: number,
  maxHeight: string
}>()
const activeIndex = ref(0);

function changeTab(index: number) {
  activeIndex.value = index;
}
</script>
<template>
  <div class="panel-tab">
    <div class="tab-header">
      <button
          v-for="(btn, index) in props.titles"
          :key="index"
          :class="{ 'header-btn': true, active: activeIndex === index }"
          @click="changeTab(index)"
      >
        {{ btn }}
      </button>
    </div>
    <div class="tab-content">
      <div
          v-for="(content, index) in props.count"
          :key="index"
          :class="{ content: true, display: activeIndex === index }"
      >
<!--        <n-scrollbar trigger="hover" :style="{maxHeight: props.maxHeight ?? '95vh', paddingBottom: 20 + 'px'}" style="overflow-x: visible">-->
          <slot :name="`${index}`">
            {{content}}
          </slot>
<!--        </n-scrollbar>-->

      </div>
    </div>
  </div>
</template>



<style scoped lang="scss">
$fontCor: #6c7d8f;
$activeFontColor: black;
//.n-scrollbar-container {
//  overflow-x: visible !important;
//}
.panel-tab {
  padding: 5px 15px;
  width: 100%;
  height: 100%;
  background-color: $mainCor;
  .tab-header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-evenly;
    .header-btn {
      width: 100px;
      height: 100%;
      color: $fontCor;
      font-size: 16px;
      background-color: transparent;
      border: none;
      cursor: pointer;
      &:hover {
        color: $activeFontColor;
      }
    }
    @include borderM;
  }
  .tab-content {
    margin: 10px 0;
    padding-bottom: 30px ;
    width: 100%;
    height: 100%;
    overflow: visible;

    .content {
      display: none;
    }
  }
}

.active {
  color: $activeFontColor !important;
  border-bottom: 1px solid $activeFontColor !important;
}
.display {
  display: block !important;
  animation: moving .5s ease;
}

@keyframes moving {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>
